<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/default.xhtml"
		 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core" >
      
	<ui:define name="title">#{msg.navBarModifyGroupHead}</ui:define>

	<ui:param name="hideTabBar" value="true" />

	<ui:define name="display">
   <style>
		.base-table {
			border:0px solid #98BF21;
			border-collapse:collapse;
			border-color:#888;
			table-layout:fixed;
		}
		   		
		.base-table th {
		   	background-color:#B9D264;
			font-weight:bold;
			font-size:.9em;
			overflow:hidden;
		 }
		   		
		.base-table td {
		   	padding:5px 5px 5px;
		   	text-align:center;
		 }
		   		
		.base-table a {
		   	width:100%;
			border:0;
		 }
		   		
		 .base-table .alt {
		   	background-color:#CCC;
		 }
		   		
		.base-table .alt-col {
			width:40%;
		 }
		 
		.base-table-center {
		   	margin:0 auto;
		 }
	</style>
    
    <h:outputText value="#{navController.breadcrumbTrail}" />
    
    <h1><h:outputText value="#{msg.navBarModifyGroupHead}" /></h1>
    <h:messages id="errors" globalOnly="true" />
    <h:form id="form">
	   	<table>
	   		<tr>
	 			<td><h:outputText value="#{msg.socialGroupId}:" rendered="#{flowScope.step >= 0}" /></td>
		     	<td>
			      	<h:inputText styleClass="socialGroup" autocomplete="off" id="group" value="#{modifyHOHBean.group}" converter="#{socialGroupExtIdConverter}" disabled="#{flowScope.step >= 1}" />
			        <script>document.getElementById('form:group').focus();</script>
		        </td>
	      		<td><h:message for="group" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
	   		</tr>
	       		              
	    	<c:if test="#{flowScope.step >= 1}">      
	        	<tr>		              
	            	<td><h:outputText value="#{msg.modifyHOHSuccessorIndividualId}:"/></td>
	             	<td><h:inputText styleClass="individual" autocomplete="off" id="successor" value="#{modifyHOHBean.selectedSuccessor}" converter="#{individualExtIdConverter}" disabled="true" /></td>
	        		<td><h:message for="successor" errorClass="error" errorStyle="color: red" infoStyle="color: green"/></td>
				</tr>
			</c:if>
		</table>
	
		<c:if test="#{flowScope.step >= 1}">      
			<h4><h:outputText value="#{msg.modifyHOHCurrentGroupHead}: #{modifyHOHBean.group.groupHead.extId}" /></h4>
	 		<h4>#{msg.modifyHOHSelectSuccessor}: #{modifyHOHBean.group.extId} </h4>		
	       	<table class="base-table" width="50%">
	           	<tr class=",alt">
	               	<td rowspan="2" class="alt-col" valign="top">
	                   	<c:if test="#{modifyHOHBean.sizeOfMembershipsOfSocialGroup == 0}" >  
	                   		<h:outputText value="#{msg.individualEmpty}" />
	                 		</c:if>
	                       <h:dataTable styleClass="base-table"
	                          value="#{modifyHOHBean.membershipsOfSocialGroup}"
	                          var="mem" width="100%" rowClasses=",alt"
	                          columnClasses=",,,alt-col" rendered="#{modifyHOHBean.sizeOfMembershipsOfSocialGroup > 0}">
	                       	<h:column>  
	                           	<f:facet name="header">
	                               	<h:outputText value="#{msg.individualId}" />
	                            	</f:facet>
	                             	<h:outputText value="#{mem.individual.extId}" />
	                           </h:column>
	                           <h:column>  
	                               <f:facet name="header">
	                               	<h:outputText value="#{msg.individualFullName}" />
	                            	</f:facet>
	                             	<h:outputText value=" #{mem.individual.firstName} #{mem.individual.lastName}" />
	                           </h:column>
	                           <h:column>
	                            	<f:facet name="header">
	                            		<h:panelGroup>
	                            			<h:outputText value="#{msg.navBarRelationship}" /> <br />
	                            			<img class="clickable" onclick="O$('popupWindowForRelationship').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                            		</h:panelGroup>
	                                </f:facet>
	                            	<h:outputText value="#{mem.bIsToA}" />
	                            </h:column>   
	                           <h:column>
								<f:facet name="header"/>		                       	
								<h:commandLink immediate="true" value="#{msg.lblSelect}" action="setIndividual" rendered="#{modifyHOHBean.selectedSuccessor == null}">
										<f:param name="indivId" value="#{mem.uuid}" />
								</h:commandLink>
							</h:column>
	                       </h:dataTable>
	                       <br />
						<h:commandButton immediate="true" rendered="#{modifyHOHBean.selectedSuccessor != null}" value="#{msg.modifyHOHClearSelectedIndividual}" action="clearIndividual" />
						<br />
	                   </td>   
	               </tr>
	           </table>  
	        </c:if>              
              
	         <c:if test="#{modifyHOHBean.selectedSuccessor != null}">
	    		<h4>#{msg.modifyHOHCreateMembership}: #{modifyHOHBean.selectedSuccessor.extId}</h4>  
				<table class="base-table" width="50%" >
	          		<tr class=",alt">
	              		<td rowspan="2" class="alt-col," valign="top">
	                  		<c:if test="#{modifyHOHBean.newMembershipListSize == 0}" >  
	             				<h:outputText value="#{msg.membershipEmpty}" />
	           				</c:if>
	           				<h:dataTable styleClass="base-table"
	                         value="#{modifyHOHBean.newMemberships}"
	                         var="mem" width="100%"
	                         rowClasses=",alt" columnClasses=",,alt-col" rendered="#{modifyHOHBean.newMembershipListSize > 0}">
	                        	<h:column>  
	                           		<f:facet name="header">
	                           			<h:outputText value="#{msg.individualId}" />
	                     		 	</f:facet>
	                      	  		<h:outputText value="#{mem.individual.extId}" />
	                         	</h:column> 
	                            <h:column>
	                            	<f:facet name="header">
	                                	<h:outputText value="#{msg.indiviudalFullName}" />
	                                </f:facet>
	                            	<h:outputText value="#{mem.individual}" />
	                            </h:column>
	                            <h:column>
	                            	<f:facet name="header">
	                            		<h:panelGroup>
	                            			<h:outputText value="#{msg.navBarRelationship}" /> <br />
	                            			<img class="clickable" onclick="O$('popupWindowForRelationship').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                            		</h:panelGroup>
	                                </f:facet>
	                            	<h:outputText value="#{mem.bIsToA}" />
	                            </h:column>   
	                      	</h:dataTable>
	                      	<br />
	                      	<h:commandButton id="newMembershipBtn" value="#{msg.modifyHOHAddMembership}" action="newMembership"/>
	              		</td>
	              	</tr>
	     		</table>
			</c:if>	
	  		<h:commandButton id="setGroupBtn" value="#{msg.lblSelect}" action="setGroup" rendered="#{flowScope.step == 0}"/>
        	<c:choose>
	         	<c:when test="#{flowScope.step >= 1}">
	           		<h:commandButton id="createBtn" action="create" value="#{msg.lblCreate}"/>
	           		<h:commandButton immediate="true" value="#{msg.lblCancel}" action="finish"  />
	           	</c:when>
			</c:choose>
        </h:form>
    </ui:define>
</ui:composition>
